<template>
	<view class="content">
		<List :url="url" :list.sync="list" type='garbageBinbox' @look="_handleLook" :v-model:isChecked="isChecked"
			@delete="_handleDelete" @transmit="_handleTransmit" @recovery="handleRecovery" @click-item="_handleLook">
			<template v-slot:search>
				<view>
					<r-row gutter="16" align="center" justify="center">
						<r-col :span="1.5" @click="selectShowRef._show()">
							<uni-easyinput v-model="selectText" placeholder="请选择" suffixIcon="down"
								placeholder-style="font-size:28rpx"
								style="font-size: 28rpx;margin-left: 20rpx;pointer-events: none;" disabled
								:styles="{disableColor:'transparent'}" class="cus_disabled" :inputBorder="false"></uni-easyinput>
						</r-col>
						<r-col :span="4.5">
							<uni-search-bar placeholder="搜索" :show-action="false" :input-style="{ fontSize: '28rpx' }"
								v-model:modelValue="queryParam.what" style="width: calc(100% - 50rpx);"></uni-search-bar>
						</r-col>
					</r-row>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;margin-top: 20rpx;">
					<button size="mini" :hover-class="'buttons'"
						:style="{ width: '200rpx', backgroundColor: '#0097ff', border: 'none', color: '#fff', fontSize: '32rpx' }"
						@click="search">查询</button>
				</view>
			</template>
			<template v-slot:content="{ item }">
				<view class="list_item_info">
					<view class="list_item_info_item">
						<view class="title word-overflow">
							{{ item.title }}
						</view>
						<view>
							{{ item.senderRealName }}
						</view>
					</view>
					<view class="list_item_info_item">
						<view class="msg_level">
							{{ item.msgLevel === 0 ? '普通' : item.msgLevel === 1 ? '紧急' : '' }}
						</view>
						<view class="send_time">
							{{ item.sendTime }}
						</view>
					</view>
				</view>
			</template>
		</List>

		<view class="body_bottom" v-if="isChecked">
			<view @click="_handleCancel">
				取消
			</view>
			<view @click="_handleSelectAll">
				全选
			</view>
			<view @click="_handleDeleteBatch" style="color:red">
				删除
			</view>
			<view @click="_handleRecovery">
				恢复
			</view>
		</view>
		<!-- 搜索 -->
		<TkiTree idKey="value" rangeKey="label" :range="kindList" ref="selectShowRef" @confirm="confirmSelect"
			:multiple="false" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		postFormAction
	} from '@/utils/request.js';
	import List from '../common/list.vue'
	import TkiTree from '@/components/tki-tree/tki-tree.vue'
	import {
		useList
	} from '@/pages/use/useList';
	import {
		useStore
	} from 'vuex'
	const store = useStore()
	const emailType = computed(() => store.state.emailType)
	const url = {
		list: '/message_oa/listCycle',
		delete: '/message_oa/del',
		restore: '/message_oa/restore', //从垃圾箱恢复
	}
	const selectShowRef = ref(null)
	const isChecked = ref(false)
	const kindList = [{
			label: '标题',
			value: 'title',
		},
		{
			label: '内容',
			value: 'content',
		},
		{
			label: '发件人',
			value: 'sender',
		},
		{
			label: '未读消息',
			value: 'notreaded',
		},
	]
	const selectText = ref('标题')

	const {
		queryParam,
		search,
		list,
	} = useList({
		url: url,
		isGet: false,
		loadHock: true,
		isPostFormAction: true,
		queryParam: {
			isDept: emailType.value == 2 ? true : '',
			action: 'search',
			kind: 'title',
			what: '',
		}

	})

	function _handleRefresh() {
		isChecked.value = false
		search()
	}

	function _handleLook(record) {
		uni.navigateTo({
			url: `/cmn/internalEmail/common/inboxView?type=garbageBinbox&mainId=${record.id}`,
		});
	}
	//转发
	function _handleTransmit(record) {
		uni.navigateTo({
			url: `/cmn/internalEmail/writebox/transmitMessage?mainId=${record.id}`,
		});
	}

	function _handleDelete(record) {
		uni.showModal({
			title: "提示",
			content: "您确定删除么？",
			success: (res) => {
				if (res.confirm) {
					handleDelete(record.id);
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	}
	//全选
	function _handleSelectAll() {
		list.value.forEach(item => {
			item.checked = true
		})
		list.value = [...list.value]
	}
	//取消全选
	function _handleCancel() {
		list.value.forEach(item => {
			item.checked = false
		})
		list.value = [...list.value]
		isChecked.value = false
	}
	//删除
	function handleDelete(ids) {
		try {
			uni.showLoading({
				title: '删除中',
				mask: true
			});
			postFormAction(url.delete, {
				ids: ids,
			}).then((res) => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				if (res.data.res == 0) {
					//删除后要刷新，确保list能够触底加载
					_handleRefresh();
				}
			});
		} catch (e) {
			uni.hideLoading()
		} finally {
			uni.hideLoading()
		}
	}
	//批量删除
	function _handleDeleteBatch() {
		let selectList = list.value.filter(item => item.checked);
		let checkes = selectList.map(item => item.id);
		if (checkes.length == 0) {
			uni.showToast({
				title: '请选择数据',
				icon: 'none'
			});
			return;
		}
		const ids = checkes.join(',');
		uni.showModal({
			title: "提示",
			content: "您确定删除么？",
			success: async (res) => {
				if (res.confirm) {
					handleDelete(ids)
				}
			}
		})
	}
	//单个恢复
	async function handleRecovery(record) {
		const ids = record.id
		await postFormAction(url.restore, {
			ids: ids,
		}).then((res) => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			if (res.data.res == 0) {
				//删除后要刷新，确保list能够触底加载
				_handleRefresh();
			}
		});
	}
	//恢复
	async function _handleRecovery() {
		let selectList = list.value.filter(item => item.checked);
		let checkes = selectList.map(item => item.id);
		if (checkes.length == 0) {
			uni.showToast({
				title: '请选择数据',
				icon: 'none'
			});
			return;
		}
		const ids = checkes.join(',');
		await postFormAction(url.restore, {
			ids: ids,
		}).then((res) => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			if (res.data.res == 0) {
				_handleRefresh();
			}
		});
	}

	function confirmSelect(e) {
		if (e && e.length) {
			selectText.value = e[0].label;
			queryParam.value.kind = e[0].value;
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 100rpx;

		.list_item_info {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 20rpx;
			border-bottom: 1px solid rgba(0, 0, 0, .1);

			&_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 20rpx;

				.title {
					flex: 1;
					white-space: normal;
					word-break: break-all;
					font-weight: bold;
				}

				.send_time,
				.msg_level {
					color: #999;
				}
			}
		}

		.body_bottom {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		}
	}
	.cus_disabled {
		::v-deep .uni-input-input{
			text-align: center !important;
			color: #000;
		}
	}
</style>